import React from 'react';
import '../css/login.css';
import { Form, Icon, Input, Button, Checkbox, Alert } from 'antd';
import Methods from '../until/Store.js';

const FormItem = Form.Item;
class Login extends React.Component{
	constructor(props) {
	    super(props);
	    this.state = {
	    	code: 0,
	    	message: '默认不显示'
	    }
	  }


	handleSubmit = (e) => {
	    e.preventDefault();
	    let _self = this
	    this.props.form.validateFields((err, values) => {
	      if (!err) {
	        console.log('Received values of form: ', values);
	            fetch('http://58e72bae79739c1200ed3cef.mockapi.io/xiaozhu/users')
		            .then((resp) => resp.json())
			        .then(function(data) {
				    	let resultData = data.filter(item => 
				    		item.email === values.email
				    	)
				    	console.log('datashi', data, 'zuihou de shu zu shi ', resultData)
				    	if(resultData.length >= 1){
				    		let result = resultData.pop()
				    		if(result.password === values.password){
				    			_self.setState({
					    			code: 1,
					    			message: '恭喜你登录成功!'
				    			})
				    			Methods.store("user_id", result.id)
				    			location.href = '/'
				    		}else{
				    			_self.setState({
					    			code: 2,
					    			message: '请确认用户名或者密码!'
				    			})
				    		}
				    	}else{
				    		_self.setState({
				    			code: 2,
				    			message: '请确认用户名或者密码!'
				    		})
				    	}
				    	console.log("current data was:", resultData,'zhuangtaishi:', _self.state)
				    })
	      }
	    });
	  }

	render() {
	    const { getFieldDecorator } = this.props.form;
	    const code = this.state.code
	    let showtype;
	    if(code === 1){
    		showtype = <Alert message="Successful To Login!" type="success" showIcon />
    	}else if(code === 2){
    		showtype = <Alert message={this.state.message} type="error" showIcon />
    	}

	    return (
	      <Form onSubmit={this.handleSubmit} className="login-form">
	        <FormItem>
	          {getFieldDecorator('email', {
	            rules: [{ required: true, message: 'Please input your username!' }],
	          })(
	            <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
	          )}
	        </FormItem>
	        <FormItem>
	          {getFieldDecorator('password', {
	            rules: [{ required: true, message: 'Please input your Password!' }],
	          })(
	            <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
	          )}
	        </FormItem>
			{showtype}	        
	        <FormItem>
	          {getFieldDecorator('remember', {
	            valuePropName: 'checked',
	            initialValue: true,
	          })(
	            <Checkbox>Remember me</Checkbox>
	          )}
	          <a className="login-form-forgot" href="">Forgot password</a>
	          <Button type="primary" htmlType="submit" className="login-form-button">
	            Log in
	          </Button>
	          Or <a href="/register">register now!</a>
	        </FormItem>
	      </Form>
	    );
	  }

};
const WrappedNormalLoginForm = Form.create()(Login);
export default WrappedNormalLoginForm;